import { render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom容器 -- createVNode + render 组合 可动态创建标签或组件
// const divNode = createVNode('div', { class: 'xtx-message-container' })
const divNode = <div class="xtx-message-container"></div>
// 虚拟dom渲染到 body中
render(divNode, document.body)
// .el  可获得真实dom节点
const div = divNode.el

const XtXMessage = ({ message, type }) => {
  // 动态创建新虚拟dom
  // const comVNode = createVNode(XtxMessage, { message, type })
  const comVNode = <XtxMessage {...{ message, type }}></XtxMessage>
  // 把组件渲染到 div真实节点中
  render(comVNode, div)

  // 渲染3秒 自动卸载
  setTimeout(() => {
    render(null, div)
  }, 3000)
}
export default XtXMessage
